<template>
    <div>
        <img :src="qrCodeDataUrl" alt="QR Code" />
    </div>
</template>
  
<script setup>
import { ref, onMounted ,defineProps} from 'vue';
import QRCode from 'qrcode';

const props = defineProps({
    value: { // 二维码内容
        type: String,
        required: false,
        default: () => ({}),
    },
    size: { // 二维码大小
        type: Number,
        required: false,
        default: 200,
    },
    color: {  // 二维码颜色
        type: String,
        required: false,
        default: '#000000',
    },
});
const qrCodeDataUrl = ref(''); //二维码图片地址

onMounted(async () => {
    const text = props.value; // 要生成二维码的文本
    console.log(text)

    try {
      //  QRCode.toDataURL('内容',{width:"",color:""})//生成二维码方法

        const dataUrl = await QRCode.toDataURL(text,{
            errorCorrectionLevel:'H',
            width: '100%',
            'color.dark': props.color,
        });
       console.log(dataUrl,"--------生成的图片链接")

        qrCodeDataUrl.value = dataUrl;
    } catch (error) {
        console.error('Failed to generate QR Code', error);
    }
});


</script>
